<template>
  <div>
    <el-card>
      <div class="head">
        企业编号<el-input class="number"
                  v-model="form.eid"> </el-input>
        企业名称<el-input v-model="form.name"
                  class="name"> </el-input>
        创建者<el-input v-model="form.username"
                  class="establish"> </el-input>
        状态
        <el-select v-model="form.status"
                   placeholder="请选择">
          <el-option v-for="item in list"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary"
                   @click="searchEvent">搜索</el-button>
        <el-button @click="cleanEvent">清除</el-button>
        <el-button type="primary"
                   @click="addClick">+新增企业</el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="cardData"
                style="width: 100%">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>{{ (form.page - 1) * form.limit + $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="企业编号"
                         prop="eid"> </el-table-column>
        <el-table-column label="企业名称"
                         prop="name"> </el-table-column>
        <el-table-column label="创建者"
                         prop="username"> </el-table-column>
        <el-table-column label="状态"
                         width="100px">
          <template v-slot="{ row }">
            <div :class="{ red: row.status == 0 }">
              {{ row.status == 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text"
                         @click="editEvent(row)">编辑</el-button>
              <el-button type="text"
                         @click="forbidEvent(row.id)">
                {{ row.status == 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button type="text"
                         @click="deleteClick(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination :current-page="form.page"
                       :page-size="form.limit"
                       layout="total, prev, pager, next , sizes , jumper"
                       :total="form.total"
                       :page-sizes="[1, 10, 20, 50, 100]"
                       @size-change="sizeChange"
                       @current-change="pageChange" />
      </div>
    </el-card>
    <Add v-model="show"
         @getData="getData"
         ref="add" />
  </div>
</template>

<script>
import Add from './component/add.vue'
import {
  enterpriseList,
  enterpriseRemove,
  enterpriseStatus
} from '@/api/business.js'
export default {
  components: {
    Add
  },
  data () {
    return {
      form: {
        eid: '',
        name: '',
        username: '',
        status: '',
        page: 1, // 页面数
        limit: 10, // 页容器
        total: 100
      },
      show: false,
      list: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      cardData: [{}]
    }
  },
  created () {
    this.getData()
  },

  methods: {
    async getData () {
      const res = await enterpriseList(this.form)
      console.log('获取列表数据', res)
      this.cardData = res.data.items
      this.form.total = res.data.pagination.total
    },
    // 点击搜索
    searchEvent () {
      this.getData()
    },
    // 页容器改变
    sizeChange (size) {
      this.form.limit = size
      this.form.page = 1
      this.getData()
    },
    // 页码改变
    pageChange (page) {
      this.form.page = page
      this.getData()
    },
    // 点击新增
    addClick () {
      this.show = true
      this.$refs.add.meta = 'add'
    },
    deleteClick (id) {
      this.$confirm('您确认要删除吗?', '温馨提示').then(async () => {
        const res = await enterpriseRemove({ id })
        console.log('删除', res)
        this.$message.success('删除成功')
        // 回到第一页
        this.form.page = 1
        this.getData()
      })
    },
    // 编辑
    editEvent (row) {
      this.show = true
      this.$refs.add.meta = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 禁用
    async forbidEvent (id) {
      const res = await enterpriseStatus({ id })
      console.log('状态', res)
      this.$message.success('设置状态成功')
      this.getData()
    },
    // 清除
    cleanEvent () {
      this.form.eid = ''
      this.form.name = ''
      this.form.username = ''
      this.form.status = ''
      this.getData()
    }
  }
}
</script>

<style lang="less">
.number {
  width: 100px;
  height: 39px;
}
.name {
  width: 149px;
  height: 39px;
}
.establish {
  width: 100px;
  height: 39px;
}
.condition {
  width: 149px;
  height: 39px;
}
.page {
  text-align: center;
  margin-top: 20px;
}
.red {
  color: red;
}
</style>
